Lab 4: Positioning with CSS

Lab 4 Files

• Create one XHTML 1.0 Strict web page and an externally linked CSS file inside C:\wamp\www\labs\lab4.
  1. lab4.html XHTML 1.0 Strict markup file
  2. lab4.css style sheet file

To save typing time, the text content of lab4.html is available online.

• Two images are used in the assignment.
  Download and save the two images to your lab4 folder
  1. logo.png - the boxy logo in the upper left corner
  2. pattern.png - the background image in the center main content area

Use HTML and CSS to create a 3 column layout

Create the web page shown below with a top banner section, 3 columns, and a bottom footer section

• Use div to divide lab4.html into five sections:
  1. top banner area
  2. left navigation area
  3. right advertisement area
  4. center main content area
  5. bottom footer area

• Use CSS style rules to duplicate the 3 column layout with top banner and bottom footer as shown in the lab4.html screen snapshot below
  • You may use absolute or float positioning (or both). You may begin with a template or develop your own
  • Pages will be checked using Firefox on a lab computer
    • Your design does not need to be fluid or support multiple screen resolutions
    • Your design does not need to support cross-browser (IE, opera, safari, small screen)

Screen Snapshot

lab4.html screen snapshot

Colors Used

The page use the following color scheme:

#1E3C3C	#4D5D2E	#633232	#FFFFFF	#858585	#5C5C5C	#CCCCCC
top banner area	bottom footer area	left navigation area	center main content area	right advertisement area	advertisement box & navigation link left border	navigation link background color

All text on the page is formatted using the sans-serif font family, either white or black, and kept at its default size and font weight.

Headings and paragraphs are used to contain the text. Margins and paddings are used to add vertical and/or horizontal space between elements. Do not use <br /> elements to add vertical spacing.